@charset "utf-8";
 
@mixin right_btn{
        width: 27.3%;
        height: 59px;
        font-size: 14px;
        text-align: center;
        line-height: 59px;
        background: #FFFFFF;
} 
@mixin p{
    p{
        line-height: 40px;
        display:inline-block;
        vertical-align: top;
        padding-right:21px ;
        font-size: 13px;
        span{
            color: #eb413d;
        }
    }
}
@mixin Invalid{
            width: 33.3%;
            height: 2px;
            background: #d9d9d9;
            position: relative;
            img {
                margin-top: -33.5px;
            }
            .step_name{
                font-size: 16px;
                position: absolute;
                left: 65px;
                top:6px;
                color: #444f58;
            }
            .step_number {
                position: absolute;
                top: -25px;
                left: 65px;
            }
        }
 @mixin btn{
               width: 57%;
               height: 102px;
               border-radius: 5px;
               margin: 60px auto 0;
               border: 1px solid #b6413d;
               line-height: 102px;
               text-align: center;
               font-size: 20px;
           }
.web {
    width: 100%;
}

.content {
    width: 73%;
    margin: 0 auto;
}

//nav
.oder_nav>ul>li {
    float: left;
    padding: 24px 5px 23px 0;
    ;
}

.oder_nav>ul>li>a {
    color: #686f76;
}

.oder_nav>ul>li>a>span {
    color: #99999a;
}

//内容
.container {
    width: 100%;
    border-top: 4px solid #eb413d;
    .step {
        width: 80%;
        padding-top: 85px;
        padding-left: 100px;
        margin-left: 6%;
        height: 196px;
        .active {
            @include Invalid;
            background: #EB413D;
            .step_number {
                color: #EB413D;
            }
            p {
                width: 40%;
                font-size: 14px;
                text-align: center;
                margin-left: -10px;
                color: #99999a;
            }
        }
        .Invalid {
             @include Invalid;
             >.step_name{
                 color: #878787;
             }
             >.step_number{
                 color: #878787;
             }
        }
        .Invalid1 {
            @include Invalid;
             >.step_name{
                 color: #878787;
             }
             >.step_number{
                 color: #878787;
             }
        }
    }
    .application{
        margin-bottom:302px;
    }
    .conter{
       width: 100%;
       border: 1px solid #e7e7e7; 
       margin-top:10px;
       
       .shadow{
        width: 100%;
        height: 3px;
        background: #f8f8f8;   
       }
       .con_left{
           width: 42.2%;
           border-right: 1px solid #E7E7E7;
           .wares_ifm{
               padding:40px 37px 40px 41px;
               p{
                   font-size: 18px;
                   line-height:19px;
                   vertical-align: middle;
               
                   img{
                        width: 20px;
                        height: 20px;
                        overflow: hidden;
                        vertical-align: middle;
                        margin-left: 15px;
                   }
               }
               
               .dress{
                   width: 100%;
                   padding-bottom: 23px;
                   border-bottom: 1px dotted #c9c8c8;
                   .wares_img{
                       width:39%;
                       height: 120px;
                       border: 1px solid #e7e7e7;
                       text-align: center;
                       line-height: 120px;
                       overflow: hidden;
                       img{
//                         width: 74px;
//                         height: 99px;
                           overflow: hidden;
                           vertical-align: middle;
                       }
                   }
                   p{
                       width: 58.9%;
                       color: #444f58;
                       font-size: 12px;
                       padding-top: 5px;
                       padding-left:19px ;
                   }
                   span{
                       display: inline-block;
                       font-size: 13px;
                       margin-left: 20px;
                       margin-top: 35px;
                       color: #444f58;
                   }
               }
           }
           .price{
            
               border-top:1px dotted #c9c8c8;

                p{
                    font-size: 12px;
                    letter-spacing: 6px;
                    line-height: 12px;
                    color: #878787;
                    padding-top: 15px;
                    padding-left: 10px;
                    span{
                        color:#444f58;
                        letter-spacing: 0;
                    }
                    .X1{
                       padding-left: 6px;
                    }
                }
                >span{
                    display: inline-block;
                    line-height: 17px;
                    padding-left: 10px;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    img{
                        vertical-align: top;
                        padding-left: 10px;
                        cursor: pointer;
                    }
                }
                
           }
           .order_ifm{
               div{
                   font-size: 18px;
                   padding-top: 20px;
               }
               p{
                   font-size: 12px;
                   color: #878787;
                   padding-top: 18px;
                   span{
                       color: #444f58;
                   }
                   
                   img{
                       width: 15px;
                       height: 15px;
                       margin-right: 10px;
                       margin-left: 0;
                   }
               }
               .details{
                       padding-top: 30px;
                       cursor: pointer;
                   }
           }
           .order_ifm_foot{
               
               p{
                   font-size: 12px;
                   color: #878787;
                   padding-top: 18px;
                   span{
                       padding-left: 20px;
                       color: #444f58;
                   }
                   .pad{
                       padding-left: 32px;
                   }
                   
               }
               .title{
                   margin-top:20px;
               
                   .order_text{
                       font-size:18px;
                   }
                   .logistics{
                       font-size:14px;
                       color: #444f58;
                       line-height: 14px;
                       margin-top: 5px;
                       img{
                          vertical-align: top;
                          padding-left: 10px; 
                          cursor: pointer;
                       }
                   }
               }
               
           }
       }
       .con_right{
            width: 57.8%;
           .handle{
                font-size: 24px; 
                letter-spacing: 1px;
                color: #eb413d;
                text-align: center;
//              padding-top: 93px;
                line-height: 297px;
           }
           .handle_detail{
                font-size: 13px;
                letter-spacing: 1px;
                color: #878787;
                text-align: center;
                padding-top: 27px;
               
           }
           .message{
               width: 89%;
               margin: 40px auto 48px;
               .title{
                    font-size: 18px;
                    letter-spacing: 1px;
                    color: #444f58;
               }
               .mge_con{
                   margin-top: 23px;
                   .header_img{
                        width: 15%;
                        height: 83px;
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                   }
                   .content{
                       margin-left: 3.9%;
                       .name{
                           font-size: 16px;
                           color: #878787;
                       }
                       .time{
                           font-size: 13px;
                           color: #878787;
                       }
                       .type{
                           font-size: 16px;
                           color: #444f58;
                           padding-top: 10px;
                       }
                       .reason{
                           font-size: 13px;
                           color: #878787;
                           padding-top: 13px;
                           span{
                              color:#444f58;
                              padding-left:0.9%;
                              padding-right: 3.8%;
                           }
                       }
                       .picture{
                           margin-top:23px ;
                           display: inline-block;
                           width: 156px;
                           height:156px;
                           background-color: #444f58;
                           opacity: 0.1;
                       }
                       
                   }
               }
           }
       }
    }
}


